<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html-dom</title>
    <script src="jquery-1.10.2.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        .div{width:200px;height:200px;border:1px solid #ff0000;margin:5px;}
        .div1{background:#D2D2D2;}
        .div2{background:#aa00ff;}
    </style>
</head>
<body>
    <div ng-app="app01" ng-controller="ctrl01">
        <h2>ng-disabled</h2>
        <div ng-init="mySwitch=true">
            <input type="checkbox" ng-model="mySwitch">按钮
            <br/><button ng-disabled="mySwitch">点击</button>
            {{mySwitch}}
        </div>
        <h2>ng-show</h2>
        <div ng-init="flag2=true" style="height:250px;background: #F2F2F2;margin:5px;">
            <div>
                <input type="checkbox" ng-model="flag2">显示/隐藏
                <b>ng-show=</b>{{flag2}}
            </div>
            <div>
                <div  class="div" ng-show="flag2"></div>
            </div>
        </div>
        <h2>ng-hide</h2>
        <div ng-init="flag3=false">
            <div>
                <input type="checkbox" ng-model="flag3"/>
                <b>ng-hide=</b>{{flag3}}
            </div>
            <div>
                <div  class="div" ng-hide="flag3"></div>
            </div>
        </div>
        <h2>ng-click</h2>
        <div ng-init="count=0">
            <button style="height:40px;" ng-click="count=count+1">点击次数</button>点击次数：{{count}}
        </div>
        <h2>addClass</h2>
        <div id="flag4">
            <div class="div"></div>
        </div>
        <div id="flag5">
            <div class="div"></div>
        </div>
    </div>
    <script>
        var app01=angular.module("app01",[]);
        app01.controller("ctrl01",function ($scope,$timeout,$interval) {
            $timeout(function () {
                angular.element('#flag4').find('.div').addClass('div1');
            },1500);
            $interval(function () {
                if(angular.element("#flag4").find(".div1").length>0){
                    angular.element("#flag4").find(".div1").removeClass("div1").addClass("div2");
                }else{
                    angular.element("#flag4").find(".div2").removeClass("div2").addClass("div1");
                }

                angular.element("#flag5").find(".div").toggleClass("div1");
            },1500);
        });
    </script>
</body>
</html>